import React, { Component } from 'react'




import { Route } from 'react-router-dom'


import { TabBar } from 'antd-mobile';


import './index.css'
import  News  from '../News/index'
import HouseList from '../HouseList';
import Profile from '../Profile/index';
import Index from '../index/index';



 // TabBar 数据 ---全部数据，一般是不变的，所以放在最外面
// 而 state里面的数据，一般是可变的，

const  tabItems = [
  {
    title:'首页',
    icon:'icon-ind',
    path:'/home'
  },
  {
    title:'找房',
    icon:'icon-findHouse',
    path:'/home/list'
  },
  {
    title:'资讯',
    icon:'icon-infom',
    path:'/home/news'
  },
  {
    title:'我的',
    icon:'icon-my',
    path:'/home/profile'
  },
]
 class   Home  extends Component {

      state = {
        // 默认选中的TabBar菜单项
        selectedTab: this.props.location.pathname,
       
     
      };

    
      // 1、渲染  TabBar.Item  

      renderTabBarItem(){

 
         return  tabItems.map( (it)=>
                
                  
            (     <TabBar.Item
              title={it.title}
              key={it.title}
              icon={
  
                <i  className={ `iconfont  ${it.icon}  `}></i>
              }
              selectedIcon={ <i  className={ `iconfont  ${it.icon}  `}></i>
              }
              selected={this.state.selectedTab === it.path}
            
              onPress={() => {
                this.setState({
                  selectedTab: it.path,
                });
  
                // 路由切换
                this.props.history.push(it.path)
              }}
          
            >
            
            </TabBar.Item>
  )


         )
      }
      

      // 2、解决---点击nav导航菜单--整租，合租，导航到 找房列表 页面时 ，找房 项没有字体高亮
         
      componentDidUpdate(preProps){
        console.log('上一次的路由信息：',preProps)

        console.log('当前的路由信息：',this.props)

        if(preProps.location.pathname !== this.props.location.pathname){

           // 表示此时，路由发生了切换
           // 此时，更新 state ，让Home组件重新加载，执行render方法
           this.setState({
             selectedTab:this.props.location.pathname
           })
        }
      }


  render() {

    /* console.log(this) */
    return (
         <div  className='home'>

           {/* 3、配置路由规则，渲染子路由 */}

            <Route path='/home/news'  component={News}></Route>
            <Route  exact  path='/home'  component={Index}></Route>
            <Route path='/home/list'  component={HouseList}></Route>
            <Route path='/home/profile'  component={Profile}></Route>

               {/* TabBar组件 */}
            
            
                  <TabBar   
                    unselectedTintColor="#888"
                    tintColor="#21b97a"
                    barTintColor="white"

                  >
                   
                   {  this.renderTabBarItem()  }
                    
                  </TabBar>
              
         </div>
    )
  }
}
export default  Home